<template>
  <div>
    <p>{{state.time}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>
/**
 * 1.什么是reactive?
 * -reactive 是vue3中提供的实现响应式数据的方法
 * -在vue2中响应数据是通过defineProperty来实现的
 * 而在vue3中响应式数据是通过es6的proxy来实现的
 * 2.reactive注意点
 * reactive 参数必须是对象（json/arr)
 * 如果给reactive传递了其它对象
 * 默认情况下修改对象，界面不会自动更新
 * 如果想更新，可以通过重新赋值的方式
 *
 *
 */
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    // 创建一个响应式数据
    // 本质：就是将传入的数据包装成一个proxy对象
    // let state = reactive({
    //   age: 18
    // });
    // let state = reactive([1, 3, 5]);
    // let state = reactive({
    //   time: new Date()
    // });
    function myFn() {
      // state.age = 666; //由于创建响应式数据的时候传递的不是一个对象，所以无法实现响应式
      // state[0] = 666;
      // 直接修改自定义的 以前的，界面不会刷新
      // state.time.setDate(state.time.getDate() + 1);
      // 重新赋值
      const newTime = new Date(state.time.getTime());
      newTime.setDate(state.time.getDate + 1);
      state.time = newTime;
      console.log(state.time);
    }
    return { state, myFn };
  }
};
</script>
